<template>
  <div id="container">
    <div class="login-box">
    <el-form
      :model="form"
      class="login-form"
      ref="loginForm"
      :rules="validateRules"
    >
      <el-form-item prop="account">
        <el-input
          ref="account"
          v-model.trim="form.account"
          placeholder="请输入用户名"
          clearable
        >
          <i slot="prefix" class="wp wp-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model.trim="form.password"
          type="password"
          placeholder="请输入密码"
          clearable
          @keyup.enter.native="debouncedHandleLogin"
        >
          <i slot="prefix" class="wp wp-icon-pwd"></i>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="rememberMe">
      <el-checkbox
v-model="rememberMe" class="wp-remember"
        >记住账号</el-checkbox
      >
    </div>
    <div class="login">
      <div class="login-btn" @click="debouncedHandleLogin">登&nbsp;录</div>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
import { debounce } from 'throttle-debounce'
export default {
  name: 'LoginPwd',
  data () {
    const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,15}$/
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!pwdReg.test(value)) {
          callback(new Error('密码由6-20位字母、数字组成'))
        }
        callback()
      }
    }
    return {
      redirect: undefined,
      rememberMe: false,
      form: {
        account: '',
        password: ''
      },
      validateRules: {
        account: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        console.warn('登录触发路由', route)
        // 路由重定向路径
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.account.focus()
    })
  },
  created () {
    this.debouncedHandleLogin = debounce(300, this.handleLogin)
    const account = localStorage.getItem('account')
    if (account) {
      this.form = {
        account,
        password: ''
      }
    } else if (this.$route.query.account) {
      // 路由跳转过来
      this.form = {
        account: this.$route.query.account,
        password: this.$route.query.password || ''
      }
    }
  },
  methods: {
    handleLogin () {
      const flag = this.checkForm()
      if (!flag) return
      if (this.rememberMe) {
        localStorage.setItem('account', this.form.account)
      } else {
        localStorage.removeItem('account')
      }
      const loading = this.$loading({
        fullscreen: false,
        lock: true,
        text: '登录中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('.login-box')
      })
      this.$store
        .dispatch('user/Login', this.form)
        .then((res) => {
          if (res.code === 0) {
            // loading.close()
            const router = { path: this.redirect || '/' }
            this.$router.push(router).catch((error) => {
              console.error('异常跳转', error)
            })
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    checkForm () {
      var validate = false
      this.$refs.loginForm.validate((valid) => {
        validate = valid
      })
      return validate
    }
  }
}
</script>
<style lang="scss" scoped>
.rememberMe {
  padding: 2px;
}
.login {
  margin: 20px 0;
}
.wp-remember >>> .el-checkbox__label {
  color: #000;
}
>>> .el-form-item.is-error .el-input__inner {
  border: 2px solid #f56c6c;
  &:focus {
    border: 2px solid #f56c6c;
  }
}
.login-btn {
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 50px;
  background-color: #409eff;
  border-radius: 4px;
  padding: 0;
  transition: 0.1s;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  &:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
  &.is-disabled {
    cursor: not-allowed;
  }
}
</style>
